﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<dynamic>" %>

<asp:Content ID="Content1" ContentPlaceHolderID="PageTitle" runat="server">
    <title>易得桌面</title>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="PageStyles" runat="server">
    <style type="text/css">
        .resend_recover
        {
            border: 1px solid #CCCCCC;
            margin-bottom: 15px;
            margin-top: 10px;
            padding: 10px;
            width: 460px;
        }
        .div-project
        {
            -webkit-border-radius: 4px;
            background-color: #E5E5E5;
            width: 480px;
            height: 100px;
            border: 1px solid #A8A8A8;
            margin-top: 14px;
        }
        .div-project:hover
        {
            background-color: #36648B;
            border: 1px solid #EEEE00;
            cursor: pointer;
        }
        .div-project-info
        {
            float: left;
        }
        .div-member-list
        {
            max-width: 360px;
        }
        .div-member
        {
            width: 56px;
            height: 56px;
            margin-left: 2px;
            margin-right: 2px;
            float: left;
            text-align: center;
        }
        .div-leader-list
        {
            width: 64px;
            height: 72px;
            -webkit-border-radius: 4px;
            margin-left: 400px;
            margin-top: 6px;
            border: 1px solid #008B00;
        }
        .div-leader-list-hover
        {
            border: 1px solid #EDFFDD;
        }
        .div-leader
        {
            margin-left: 6px;
            margin-right: 6px;
            width: 50px;
            height: 50px;
            text-align: center;
        }
        
        .img-photo-leader
        {
            width: 48px;
            height: 48px;
            padding: 2px;
        }
        .img-photo-member
        {
            width: 36px;
            height: 36px;
            padding: 4px;
        }
        #txtProjectName
        {
            margin-left: 12px;
            font-size: 18px;
            font-weight: bold;
        }
        .fieldslist input
        {
            width: 240px;
        }
        .textHover
        {
            color: #eee;
        }
        .popup_block
        {
            z-index: 50;
        }
        #fade
        {
            z-index: 49;
        }
        .contextPanelCover
        {
            background-color: transparent;
        }
    </style>
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="PageScripts" runat="server">
    <script type="text/javascript">
        //************* URL常量

        var URL_APPLY_LEAVE = '/attendance/DoApplyLeave';

        //************* 全局变量

        var g_Var = {
            'tempUserId': null

    };

    //************* 常量定义
    var URL_CREATE_PROJECT = '/project/DoCreateProject';
    var URL_CURRENT_USER = '/core/GetCurrentUser';
    var DoCreateProject = $.AsycnMethod(URL_CREATE_PROJECT, 'post');
    var GetCurrentUser = $.SycnMethod(URL_CURRENT_USER);
    //************* Accessor访问器
    var EzAccessor = {};
        
    function CreateAccessor() {
        if (ezmock.IS_MOCKED) {
            EzAccessor = CreateMockEzAccessor();

        } else {
            EzAccessor = CreateRealEzAccessor();
        }
    }


    function CreateMockEzAccessor() {
        //模拟实现服务器交互方法

        var mockEzAccessor = {

    };

    return mockEzAccessor;
}

function CreateRealEzAccessor() {
    //实现服务器交互方法
    var realEzAccessor = {
        "getProjectList": function () { 
            return <%= WebJsonExtension.ToJson(Model.ProjectList) %>;
        }
    };

return realEzAccessor;
}


function bindProjectInfo(projectList){
    if (projectList.length == 0) {
        $('.div-project-list').append('<p>没有项目</p>');  
        return;  
    }

    for( var key in projectList){
            var rootDom = $('<div class="div-project"/>');
            var projectDom = $('<div class="div-project-info"/>');
            var nameStr = '<p>' +
                            '<span id="txtProjectName">{Name}</span>&nbsp;' + 
                            '<span id="txtProjectId">{ProjectId}</span>&nbsp;' + 
                            '<small id="txtCreatOn">( {CreatOn} 创建 )</small>' +
                        '</p>';
        nameStr = nameStr.replace("{Name}", projectList[key].Name)
                         .replace("{ProjectId}", projectList[key].ProjectId)
                         .replace("{CreatOn}", Date.fromEpoch(projectList[key].CreatOn).toNiceTime());
        //普通项目成员
        var memberList = projectList[key].MemberList;
        var membersDom = getMemberListDom(memberList);
        //负责人
        var leader = projectList[key].Leader;
        var leaderDom = getLeaderDom(leader);
        projectDom.append(nameStr)
                    .append(membersDom);
           
        rootDom.append(projectDom)
                .append(leaderDom)
                .appendTo($('.div-project-list'));

        //项目id
        $(rootDom).data('Id', projectList[key].Id);
        //hover 
        $(rootDom).hover(function(){
            var _self = $(this);
            _self.find('p').addClass('textHover');
            _self.find('small').addClass('textHover');
            _self.find('.div-leader-list').css({'border': '1px solid #EDFFDD'})
            
        },function(){ 
            var _self = $(this);
            _self.find('p').removeClass('textHover');  
            _self.find('small').removeClass('textHover'); 
            _self.find('.div-leader-list').css({'border': '1px solid #008B00'})
        });
           
    }

    $('.div-project').each(function (){
        var _self = $(this);
        _self.click(function() {
            window.location.href = "/project/projectMembers?id=" + _self.data('Id');
        });
    });

};

function getLeaderDom(leader){
    var leaderDom = $('<div class="div-leader-list"/>');
    var leaderInfoStr = '<div class="div-leader">' + 
                            '<img class="img-photo-leader" src="/core/headicon/{userId}" alt="headicon" />' +
                            '<p class="txtMember">{UserName}</p>' + 
                        '</div>';
    leaderInfoStr = leaderInfoStr.replace("{UserId}", leader.Member.Id)   
                                 .replace("{UserName}",leader.Member.Name);
    leaderDom.append(leaderInfoStr);   
    
    return leaderDom;
}

function getMemberListDom(memberList) {
    var membersDom = $('<div class="div-member-list"/>');
    var number = 0;
    for (var key in memberList){
        if(memberList[key].Role == "member"){
            if (key <= 3) {
                var memberInfoStr = '<div class="div-member">' +
                        '<img class="img-photo-member" src="/core/headicon/{UserId}" alt="headicon" />' +
                        '<p class="txtMember">{UserName}</p>';

                memberInfoStr = memberInfoStr.replace("{UserId}", memberList[key].Member.Id)   
                                             .replace("{UserName}", memberList[key].Member.Name);
                membersDom.append(memberInfoStr);   
            }
            else {
                number = key;
            }
        }
    }
    if (number > 3) {
            membersDom.append('<div class="div-member"> . . . </div>');
    }

    return  membersDom;
} 


//初始化页面
function initPage() {
    CreateAccessor();

    var projectList = EzAccessor.getProjectList();
    bindProjectInfo(projectList);
}

//初始化事件
function initPageEvent() {
    $('.btn-shortcut').click(function (){
        var projectContent = $('<div/>');
        projectContent.html($('#popContent').html());
        projectContent.contentsManager(
        {
            'width': '460px',
            'height': '120px'   
        });
       
        GetCurrentUser( function (currentUser) {
            g_Var.tempUserId = currentUser.Id;

            $('.popup_block').find('.pnlEditMembers').html(currentUser.Name); 
            $('.popup_block').find('.pnlEditMembers').userSelector({
                canMutipleSelect: false,
//                onPreOpenSelectPanel: function  (){
//                    $('.popup_block').find('.pnlEditMembers').userSelector('reset');
//                },
                selectorPanelClosed: function (e, arg) {
                    var str = currentUser.Name;
                    // 把选择了的人显示出来
                    $(arg.Users).each(function (index, item) {
                        str = item.Name;
                        g_Var.tempUserId = item.Id;
                    });
                    $('.popup_block').find('.pnlEditMembers').html(str);
                },

                offsetX: -180,
                offsetY: -110
            });  
        });
        
        $('.popup_block').find('.btnSubmit').click(function () {
            var  projectName = $('.popup_block').find('.txtName').val(); 
            var  projectCode = $('.popup_block').find('.txtProjectCode').val();
            var  chargeUserId = g_Var.tempUserId;
            
            $('#fade , .popup_block').fadeOut();
            
            DoCreateProject(
                function(e){
                    if (e.Status == "Success") {
                        var url = '/project/ProjectMembers?id={projectId}';
                        url = url.replace("{projectId}", e.Data.projectId);
                        $.redirectAndDisplayInfo(url, e);
                    } else {
                        $.displayStatusInfo(e)
                    }
                },
                {
                    'projectName': projectName, 
                    'projectCode': projectCode, 
                    'chargeUserId': chargeUserId
                }
            );    
        }); 
       
    });
    
}

$(function () {
    initPage();
    initPageEvent();


});

    </script>
</asp:Content>
<asp:Content ID="Content4" ContentPlaceHolderID="PageHead" runat="server">
    <%
        Html.RenderPartial("_sayHello"); %>
    <div id="status-bar">
        <% Html.RenderPartial("_navigateTo"); %></div>
</asp:Content>
<asp:Content ID="Content5" ContentPlaceHolderID="PageContent" runat="server">
    <div id="page-head">
        <img src="../../Content/icons/projects_folder_badged.png" style="width: 48px; height: 48px;"
            alt="send" />
        <span>我的项目</span>
    </div>
    <div id="page-body">
        <div class="resend_recover">
            <h3>
                我可以做些什么?</h3>
            <p style="font: 12px;">
                您可以查看您参与项目的详细信息,创建新的项目。</p>
        </div>
        <div class="div-project-list">
        </div>
    </div>
    <div class="page-submit">
    </div>
</asp:Content>
<asp:Content ID="Content6" ContentPlaceHolderID="PageShortcut" runat="server">
    <div id="shortcuts" class="box">
        <a class="btn-shortcut">添加新项目</a>
    </div>
</asp:Content>
<asp:Content ID="Content7" ContentPlaceHolderID="PageFoot" runat="server">
    <div id="tip_alert" style="display: none;">
    </div>
    <div id="popContent" style="display: none;">
        <ul class="fieldslist">
            <li>
                <div class="l">
                    <label>
                        项目名称：
                    </label>
                </div>
                <div class="r">
                    <input class="txtName" name="txtName" class="text" />
                </div>
            </li>
            <li>
                <div class="l">
                    <label>
                        项目编号：
                    </label>
                </div>
                <div class="r">
                    <input class="txtProjectCode" name="txtProjectCode" class="text" />
                </div>
            </li>
            <li>
                <div class="l">
                    <label>
                        负责人：
                    </label>
                </div>
                <div class="r">
                    <span class="pnlEditMembers">选择项目负责人</span> &nbsp;
                    <input class="btnSubmit" type="button" value="确定" style="width: 100px; height: 30px" />
                </div>
            </li>
        </ul>
    </div>
</asp:Content>
